<template>
  <div class="selectPicker">
    <div
      class="pick-value select no-select"
      v-if="query.code=='1000170311'||(detailModel['isEntryStatus']==0&&query['page'] == 'ratesChangeApply')"
    >{{storeAreaName?storeAreaName:"请选择省、市、区(县)"}}</div>
    <div
      :class="`pick-value select ${storeAreaName?'':'no-select'}`"
      @click="showPicker"
      v-else
    >{{storeAreaName?storeAreaName:"请选择省、市、区(县)"}}</div>
    <i class="zhk-list_rarrow zhk-list_rarrowlist"></i>
    <mt-popup class="selectAreaPicker" style="width:100%" v-model="visible" position="bottom">
      <div class="picker-mask-top"></div>
      <div class="picker-mask-bottom"></div>
      <div class="selectAreaPickerHead">
        <div class="left" @click="handleCancel">取消</div>
        <div class="text">所属地区</div>
        <div class="right" @click="handleOk">确定</div>
      </div>
      <div v-if="type == 'storeArea'" class="selectAreaPickerCt">
        <mt-picker
          valueKey="name"
          ref="picker1"
          :slots="provincePicker"
          @change="provincePickerChange"
        ></mt-picker>
        <mt-picker valueKey="name" :slots="cityPicker" @change="cityPickerChange"></mt-picker>
        <mt-picker valueKey="name" :slots="districtPicker" @change="districtPickerChange"></mt-picker>
      </div>
      <div v-if="type == 'branch'" class="selectAreaPickerCt">
        <mt-picker valueKey="name" :slots="provincePicker" @change="provincePickerChange"></mt-picker>
        <mt-picker valueKey="name" :slots="cityPicker" @change="cityPickerChange"></mt-picker>
      </div>
    </mt-popup>
  </div>
</template>

<script>
import Vue from "vue";
import { Switch, Picker } from "mint-ui";
Vue.component(Picker.name, Picker);
export default {
  name: "selectAreaPicker",
  data() {
    return {
      detailModel: {},
      visible: false,
      storeAreaName: "",
      pickerFlag: false,
      defaultProvinceName: "天津",
      defaultCityName: "",
      defaultDistrictName: "",
      formData: {
        province: "", //省code
        provinceName: "", //省name
        city: "", //市code
        cityName: "", //市name
        district: "", //区code
        districtName: "" //区name
      },
      cacheData: {
        province: "", //省code
        provinceName: "", //省name
        city: "", //市code
        cityName: "", //市name
        district: "", //区code
        districtName: "" //区name
      },
      //门店区域
      provincePicker: [
        {
          values: [],
          className: "areaPicker",
          textAlign: "center",
          defaultIndex: 3
        }
      ],
      cityPicker: [
        {
          values: [],
          className: "areaPicker",
          textAlign: "center",
          defaultIndex: 0
        }
      ],
      districtPicker: [
        {
          values: [],
          className: "areaPicker",
          textAlign: "center",
          defaultIndex: 4
        }
      ]
    };
  },
  props: {
    initialData: Object,
    detailData: Object,
    type: String,
    query: Object
  },
  watch: {
    initialData: {
      handler(val) {
        // if(val.provinceName){
        //   this.defaultProvinceName = val.provinceName;
        // }
        // if(val.cityName){
        //   this.defaultCityName = val.cityName;
        // }
        // if(val.districtName){
        //   this.defaultDistrictName = val.districtName;
        // }
        // this.formData = Object.assign(this.formData, val);
        this.formData = Object.assign({}, val);
        this.storeAreaName = (val.provinceName ? val.provinceName : "") + (val.cityName ? "-" + val.cityName : "") + (val.districtName ? "-" + val.districtName : val.districtName);
        this.getCityMapped("province", "");
      },
      deep: true
    },
    detailData: {
      handler(val) {
        this.detailModel = val;
      },
      deep: true
    }
  },
  mounted() {
    this.formData = Object.assign(this.formData, this.initialData);
    this.storeAreaName =
      (this.initialData.provinceName ? this.initialData.provinceName : "") +
      (this.formData.cityName ? "-" + this.formData.cityName : "") +
      (this.formData.districtName ? "-" + this.formData.districtName : "");
      if(this.initialData.province){
        this.getCityMapped("province", "");
      }
  },
  methods: {
    getIndexToCode(data, code) {
      let res = 0;
      data.map((item, index) => {
        if (item.code == code) {
          res = index;
        }
      });
      return res;
    },
    showPicker() {
      this.visible = true;
      this.visibleFlag = true;
      if((this.provincePicker[0].values&&this.provincePicker[0].values.length>0) || (this.cityPicker[0].values&&this.cityPicker[0].values.length>0)){
        return
      }
      this.getCityMapped("province", "");
    },
    //开户行所在地区
    getCityMapped(type, code) {
      this.ajax({
        type: "get",
        url: "/merchant/dic/regions.do?type=" + type + "&code=" + (code || "")
      })
        .then(response => {
          if (response && response.success) {
            const regionData = response.resultObject;
            if (type == "province") {
              const provinceIndex = this.formData.province ? this.getIndexToCode(regionData, this.formData.province) : 0;
              this.provincePicker[0].values = regionData;
              this.provincePicker[0].defaultIndex = provinceIndex;
              this.formData.province = regionData[provinceIndex].code;
              this.formData.provinceName = regionData[provinceIndex].name;
              this.getCityMapped("city", regionData[provinceIndex].code);
            }
            if (type == "city") {
              const cityIndex = this.formData.city ? this.getIndexToCode(regionData, this.formData.city) : 0;
              this.cityPicker[0].values = regionData;
              this.cityPicker[0].defaultIndex = cityIndex;
              this.formData.city = regionData[cityIndex].code;
              this.formData.cityName = regionData[cityIndex].name;
              this.getCityMapped("district", regionData[cityIndex].code);
              this.$emit("resOk");
            }
            if (type == "district") {
              const districtIndex = this.formData.district ? this.getIndexToCode(regionData, this.formData.district) : 0;
              this.districtPicker[0].values = regionData;
              this.districtPicker[0].defaultIndex = districtIndex;
              this.formData.district = regionData[districtIndex].code;
              this.formData.districtName = regionData[districtIndex].name;
            }
          } else {
            Toast("加载开户行所在地区失败");
          }
        })
        .catch(err => {
          // MessageBox.alert("获取数据异常，请稍候重试").then(action => {
          //   this.$router.push({ path: "/storeManage",query: CommonUtil.concatSessionId({}) });
          // });
        });
    },
    changeCityMapped(type, code) {
      this.ajax({
        type: "get",
        url: "/merchant/dic/regions.do?type=" + type + "&code=" + (code || "")
      })
        .then(response => {
          if (response && response.success) {
            const regionData = response.resultObject;
            if (type == "province") {
              this.provincePicker[0].values = regionData;
              this.changeCityMapped("city", regionData[0].code);
            }
            if (type == "city") {
              this.cityPicker[0].values = regionData;
              this.changeCityMapped("district", regionData[0].code);
            }
            if (type == "district") {
              this.districtPicker[0].values = regionData;
              if (regionData.length == 0) {
                this.districtPickerChange(null, [{code: '', name: ''}], null);
              }
            }
          } else {
            Toast("加载开户行所在地区失败");
          }
        })
        .catch(err => {
          // MessageBox.alert("获取数据异常，请稍候重试").then(action => {
          //   this.$router.push({ path: "/storeManage",query: CommonUtil.concatSessionId({}) });
          // });
        });
    },
    provincePickerChange(picker, values, reset) {
      if (values && values[0] && this.visibleFlag) {
        this.formData.province = values[0].code;
        this.formData.provinceName = values[0].name;
        this.changeCityMapped("city", values[0].code);
      }
    },
    cityPickerChange(picker, values, reset) {
      if (values && values[0] && this.visibleFlag) {
        this.formData.city = values[0].code;
        this.formData.cityName = values[0].name;
        this.changeCityMapped("district", values[0].code);
      }
    },
    districtPickerChange(picker, values, reset) {
      if (values && values[0] !== undefined && this.visibleFlag) {
        this.formData.district = values[0].code || '';
        this.formData.districtName = values[0].name || '';
      }
    },
    handleCancel() {
      this.visible = false;
    },
    handleOk() {
      this.visible = false;
      if (this.type == "branch") {
        const params = {
          branchProvince: this.formData.province, //开户行省code
          branchProvinceName: this.formData.provinceName, //开户行省名称
          branchCity: this.formData.city, //开户行城市code
          branchCityName: this.formData.cityName //开户行城市名称
        };
        this.storeAreaName = this.formData.provinceName + "-" + this.formData.cityName;
        this.$emit("handleOk", params);
      }
      if (this.type == "storeArea") {
        const params = {
          province: this.formData.province, //省code
          provinceName: this.formData.provinceName, //省name
          city: this.formData.city, //市code
          cityName: this.formData.cityName, //市name
          district: this.formData.district, //区code
          districtName: this.formData.districtName //区name
        };
        if (this.formData.districtName == '' || this.formData.districtName == undefined) {
          this.storeAreaName = this.formData.provinceName + "-" + this.formData.cityName;
        }
        else {
          this.storeAreaName = this.formData.provinceName + "-" + this.formData.cityName + "-" + this.formData.districtName;
        }
        this.$emit("handleOk", params);
      }
    }
  },
  components: {}
};
</script>
<style lang='scss' scoped>
@import "openPayment";
@import "./openPay.scss";
</style>
<style lang='scss'>
@import "../../style/public";
.selectPicker {
  display: flex;
  align-items: center;
  flex: 1;
  text-align: right;
  color: #333;
  @include remCalc(font-size, 32);
  @include remCalc(line-height, 44);
  i.sl-right_arrow {
    color: #ccc;
    @include remCalc(font-size, 28);
    // @include remCalc(margin-top, 8);
  }
  .selectAreaPicker {
    width: 100%;
    @include remCalc(height, 500);
    .picker-mask-bottom {
      @include remCalc(bottom, 0);
      background: linear-gradient(
        0deg,
        hsla(0, 0%, 100%, 0.9),
        hsla(0, 0%, 100%, 0.5)
      );
      position: absolute;
      left: 0;
      right: 0;
      @include remCalc(height, 140);
      transform: translateZ(0);
      z-index: 1000001;
      pointer-events: none;
    }
    .picker-mask-top {
      @include remCalc(top, 106);
      background: linear-gradient(
        180deg,
        hsla(0, 0%, 100%, 0.9),
        hsla(0, 0%, 100%, 0.5)
      );
      position: absolute;
      left: 0;
      right: 0;
      @include remCalc(height, 160);
      transform: translateZ(0);
      z-index: 1000001;
      pointer-events: none;
    }
    .selectAreaPickerHead {
      display: flex;
      justify-content: space-between;
      align-items: center;
      @include remCalc(height, 60);
      @include remCalc(padding, 20, 30);
      @include remCalc(margin-bottom, 20);
      @include remCalc(font-size, 36);
      .right {
        color: #42b983;
        @include remCalc(font-size, 26);
      }
      .left {
        @include remCalc(font-size, 26);
      }
    }
    .selectAreaPickerCt {
      display: flex;
    }
    .picker {
      flex: 1;
      .areaPicker {
        @include remCalc(font-size, 30);
      }
    }
  }
}
</style>
